<template>
	<view class="content">
		<!-- 手机状态 -->
		<statusBar></statusBar>
		<!-- <view class="status-bar" :style="{height:statusBarHeight+'px'}"></view> -->
		<!-- 头像 -->
		<image src="../../static/img/logo.png" mode='widthFix'></image>
		<!-- 输入框 -->
		<view class="input-group">
			<view class="">
				<uni-icons type="phone-filled" size="20" color="#090"></uni-icons>
				<input type="text" placeholder="请输入手机号" v-model='phone'>
				<uni-icons type="clear" size="20" color="#1296DB" @click="qinkong"></uni-icons>
			</view>
			<view class="">
				<uni-icons type="locked-filled" size="20" color="#090"></uni-icons>
				<input :password="hiddePwd" placeholder="密码长度不能小于六位数" v-model="pwd">
				<uni-icons :type="hiddePwd ? 'eye-slash-filled' : 'eye-filled'" size="20" @click="changgHeight">
				</uni-icons>
			</view>
		</view>
		<!-- 登陆按钮 -->
		<button class="btn" @click="doLogin">登陆</button>

		<!-- 找回密码 -->
		<navigator class="find" open-type="navigate" url="/pages/feePay/feePay">忘记密码</navigator>
	</view>
</template>

<script>
	import {
		userLogin
	} from "../../service/index.js"
	export default {
		data() {
			return {

				// 是否显示密码
				hiddePwd: true,
				//输入框的值
				phone: '',
				pwd: '',
				// 状态栏高度
				// statusBarHeight: 30,
			}
		},
		onLoad() {
			// let {
			// 	statusBarHeight
			// } = uni.getSystemInfoSync()
			// this.statusBarHeight

		},

		methods: {
			// 密码的显示和隐藏
			changgHeight() {
				this.hiddePwd = !this.hiddePwd
			},
			// 清空输入框
			qinkong() {
				this.phone = null
			},
			// 验证账号提交登陆
			async doLogin() {
				//查看当前输入框的值
				// console.log('当前输入框的值',this.pwd,this.phone);
				// 账号和密码进行验证，不合法就弹出提示框并结束代码
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					// 土司提示  归属于当前页面，如果跳转则不会显示
					uni.showToast({
						title: '手机号非法', //提示标题
						icon: 'none', //图标
						duration: 1000, //持续时长
						position: 'bottom'
					})
					return
				}
				// 验证密码是否合法
				if (this.pwd.length < 6) {
					uni.showToast({
						title: '密码格式不正确',
						icon: 'none',
						duration: 1000
					})
					return
				}
				//3.把手机号/密码提交给服务器端数据API，进行登录验证
				let data = await userLogin(this.phone, this.pwd)
				console.log(data);
				if (data.code == 2000) { //登录成功
					//--提示欢迎回来在index.vue里实现
					//--存储令牌
					uni.setStorageSync("userToken", data.token)
					//--跳转到主页
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else if (data.code == 4003) { //手机号或密码错误
					uni.showToast({
						title: "手机号或密码错误!",
						icon: "none",
						duration: 2000
					})
				} else { //其他错误
					uni.showToast({
						title: "其他错误!",
						icon: "none",
						duration: 2000
					})
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		// .status-bar {
		// 			background-color: $zh-theme-color;
		// 			width: 750rpx;
		// 			position: fixed;
		// 		}

		>image {
			width: 280rpx;
			border-radius: 50%;
			margin-top: 100rpx;
			margin-top: $uni-spacing-col-lg*10;
		}

		.input-group {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: $uni-spacing-col-lg;
			margin-top: 80rpx;

			view {
				display: flex;
				height: 80rpx;
				align-items: center;
				background-color: #F8F8F8;
				margin-bottom: $uni-spacing-col-lg;
				padding: 10rpx;
				border-radius: 10rpx;

				input {
					width: 500rpx;
					border: 0;
					border-radius: 10rpx;
				}
			}
		}

		.btn {
			height: 80rpx;
			width: 600rpx;
			background-color: $zh-theme-color;
			color: $uni-text-color-inverse;
			line-height: 80rpx;
			font-size: $uni-font-size-lg;

			&:active {
				//SCSS函数：darken(颜色, 百分比)，返回一个更深的颜色值
				//SCSS函数：lighten(颜色, 百分比)，返回一个更浅的颜色值
				background-color: lighten($zh-theme-color, 5%);
			}
		}


		.find {
			text-align: center;
			color: $zh-theme-color;
			margin-top: $uni-spacing-col-lg*2;
			font-size: $uni-font-size-sm;
		}

	}

	// 针对不同手机的适配
	// 高度小于500px
	@media screen and (max-height:500px) {
		.content>image {
			margin-top: 90rpx;
		}
	}

	// 高度大于700px
	@media screen and (min-height:700px) {
		.content.input-group {
			margin-top: 150rpx;
		}
	}
</style>
